<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex">
        <div style="display: flex">
          <div style="margin-top: 6px;font-size: 18px;font-weight: 500">{{titles}}</div>
          <div style="margin-left: 30px">
            <el-form>
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <el-select v-model="formBook.volume" placeholder="分卷" @change="handleVolumeChange">
                    <el-option
                        v-for="item in volumeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item style="margin-left: 10px">
                  <el-button @click="setNewVolume">新增分卷</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="5" :offset="2"> <!-- 使用 offset 可以添加列之间的间隔 -->
                <el-form-item>
                  <el-select v-model="formBook.chapter" placeholder="章节" @change="getChapter">
                    <el-option
                        v-for="item in chapterOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <template v-if="!chapterModal">
                <el-form-item style="margin-left: 10px">
                  <el-button @click="chapterModal=true">新增章节</el-button>
                </el-form-item>
                </template>
                <template v-else>
                  <el-form-item>
                    <div style="display: flex">
                    <el-input v-model="formBook.title" placeholder="章节题目"></el-input>
                    <el-button @click="setNewChapter">发布</el-button>
                    </div>
                  </el-form-item>
                </template>
              </el-col>
            </el-row>
            </el-form>
          </div>
          <div style="cursor: pointer;display: flex;margin-left: 350px;margin-top: 2px" @click="dialogFormVisible=true">
            <el-button style="float: right;height: 50px" type="primary" @click="createChapter">发布</el-button>
          </div>
        </div>
      </div>
      <div>
        <quill-editor
            ref="myQuillEditor"
            v-model="content"
            :options="editorOption"
        >

        </quill-editor>
      </div>
    </el-card>
  </div>
</template>
<script>

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import router from "@/router";


export default {
  name: "Book",
  components:{
    quillEditor
  },
  data(){
    return{
      chapterModal:false,
      titles: '',
      dialogFormVisible:false,
      volumeOptions:[],
      chapterOptions:[],
      form: {
        title: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        text: '',
        category_id:''
      },
      formBook:{
        volume:'',
        chapter:'',
        title: ''
      },
      formLabelWidth: '80px',
      content:'',
      editorOption: {
        modules:{
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], //引用，代码块
            [{'header': 1}, {'header': 2}], // 标题，键值对的形式；1、2表示字体大小
            [{'list': 'ordered'}, {'list': 'bullet'}], //列表
            [{'script': 'sub'}, {'script': 'super'}], // 上下标
            [{'indent': '-1'}, {'indent': '+1'}], // 缩进
            [{'direction': 'rtl'}], // 文本方向
            [{'size': ['small', false, 'large', 'huge']}], // 字体大小
            [{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
            [{'color': []}, {'background': []}], // 字体颜色，字体背景颜色
            [{'font': []}], //字体
            [{'align': []}], //对齐方式
            ['clean'], //清除字体样式
            ['image', 'video'] //上传图片、上传视频
          ]
        },
        placeholder: "输入内容..."
      }, //编辑器配置项
    }
  },
  mounted: function () {
    this.loadText();
  },
  methods: {
    loadText(){
      this.$axios.get('/book?id='+this.$route.params.id,).then(resp => {
        if (resp) {
          this.titles = resp.data[0].title;
        }
      })
      this.$axios.get('/volume?book_id='+this.$route.params.id,).then(resp => {
        if (resp) {
          this.volumeOptions = []
          for(let i=0;i<resp.data.length;i++){
            this.volumeOptions.push({label:resp.data[i].title,value:resp.data[i].id})
          }
        }
      })
    },
    handleVolumeChange(){
      this.$axios.get('/chapter?book_id='+this.$route.params.id+'&volume_id='+this.formBook.volume,).then(resp => {
        if (resp) {
          this.chapterOptions = []
          for(let i=0;i<resp.data.length;i++){
            this.chapterOptions.push({label:resp.data[i].title,value:resp.data[i].id})
          }
        }
      })
    },
    setNewVolume(){
      this.$axios.post('/setVolume',{title:'第'+this.volumeOptions.length+'卷',book_id:this.$route.params.id}).then(resp => {
        if (resp) {
          console.log(resp)
        }
        this.loadText()
      })
    },
    setNewChapter(){
      this.chapterModal = false
      this.$axios.post('/setChapter',{title:this.formBook.title,book_id:this.$route.params.id,volume_id:this.formBook.volume}).then(resp => {
        if (resp) {
          console.log(resp)
        }
        this.handleVolumeChange()
      })
    },
    createChapter(){
      this.$axios.post('/createChapter',{content:this.content,book_id:this.$route.params.id,volume_id:this.formBook.volume,chapter_id:this.formBook.chapter}).then(resp => {
        if (resp) {
          console.log(resp)
        }
        this.handleVolumeChange()
      })
    },
    getChapter(){
      this.content = []
      this.$axios.post('/getChapter',{chapter_id:this.formBook.chapter}).then(resp => {
        if (resp) {
          for(let i=0;i<resp.data.length;i++){
            this.content+=resp.data[i].content
          }
        }
      })
    }
  }
}
</script>
<style>
.right{
  margin-left: 30px;
}
.title {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}
:deep(.el-card){
  width: 100% !important;
}
.box-card{
  width: 100% !important;
}
.count>span{
  padding: 5px;
  color: #99a9bf;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
.ql-container.ql-snow{
  height: 600px !important;
}
</style>